window.onload = function () {
    init();  //window.onload是等页面加载完成后再触发，所以即使写在最前面也是最后才执行，因此可以找到init
}

function init() {
    initMenuEvent();
}


var initMenuEvent = (function () {
    var oMenuWrap = document.getElementsByClassName('menu-wrap')[0],
        oMainList = document.getElementsByClassName('main-list')[0],
        oSub = document.getElementsByClassName('sub')[0],
        oMainItems = oMainList.getElementsByClassName('main-item'),
        oSubItems = oSub.getElementsByClassName('sub-item'),
        oMainItemsLen = oMainItems.length,
        //延时器
        t = null,
        // 鼠标是否进入子菜单Sub内的标识
        isInSub = false,
        // 记录鼠标进入菜单的两个坐标
        mousePos = [],
        // 是否是第一次进入
        isFirst = true;



    for (var i = 0; i < oMainItemsLen; i++) {
        var mianItem = oMainItems[i];
        addEvent(mianItem, 'mouseenter', itemMoouseenter);
    }

    addEvent(oMenuWrap, 'mouseenter', function () {
        addEvent(document, 'mousemove', docMousemove);
    });

    addEvent(oMenuWrap, 'mouseleave', oMenuWrapMouseleave);

    addEvent(oSub, 'mouseenter', function () {
        isInSub = true;
    });

    addEvent(oSub, 'mouseleave', function () {
        isInSub = false;
    });


    function itemMoouseenter(e) {
        var e = e || window.event,
            tar = e.target || e.srcEvent,
            // 获取当前聚焦类的索引
            thisIdx = Array.prototype.indexOf.call(oMainItems, tar),
            // 最后一个坐标
            curPos = mousePos[mousePos.length - 1] || { x: 0, y: 0 },
            // 倒数第二个坐标
            lastPos = mousePos[mousePos.length - 2] || { x: 0, y: 0 },
            // 是否延时
            istoDelay = doTimeout(curPos, lastPos);

        if (t) {
            clearTimeout(t);
        }

        if (!isFirst) {
            // istoDelay = true 有进入子菜单的可能； 反之
            if (istoDelay) {
                t = setTimeout(function () {
                    // 如果鼠标在子菜单中  直接return 不走后面的逻辑
                    if (isInSub) {
                        return;
                    }

                    // 删除 添加 聚焦类
                    addActive(thisIdx);
                }, 300);
            } else {
                addActive(thisIdx);
            }
        } else {
            addActive(thisIdx);
            isFirst = false;
        }
    }

    function oMenuWrapMouseleave() {
        oSub.className += ' hide';
        removeAllActive();
        removeEvent(document, 'mousemove', docMousemove);
        clearTimeout(t);
    }

    function docMousemove(e) {
        var e = e || window.event;

        mousePos.push({
            x: pagePos(e).x,
            y: pagePos(e).y
        })

        if (mousePos.length >= 3) {
            mousePos.shift();
        }
    }


    // 鼠标经过时，增加样式
    function addActive(index) {
        removeAllActive();
        oSub.className = 'sub';
        oMainItems[index].className += ' cur';
        oSubItems[index].className += ' active';
    }

    // 去掉所有的选中样式
    function removeAllActive() {
        var oMainItem, oSubItem;

        for (var i = 0; i < oMainItemsLen; i++) {
            oMainItem = oMainItems[i];
            oSubItem = oSubItems[i];
            oMainItem.className = 'main-item';
            oSubItem.className = 'sub-item';
        }
    }

    // 是否延时
    function doTimeout(curPos, lastPos) {
        var topLeft = {
            x: getStyles(oMenuWrap, 'margin-left') + getStyles(oMainList, 'width'),
            y: getStyles(oMenuWrap, 'margin-top')
        },
            bottomLeft = {
                x: getStyles(oMenuWrap, 'margin-left') + getStyles(oMainList, 'width'),
                y: getStyles(oMenuWrap, 'margin-top') + getStyles(oMenuWrap, 'height')
            };
        return pointInTriangle(curPos, lastPos, topLeft, bottomLeft);
    }

    return function () {
        bindEvent();
    }

});

